<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:RollingTop>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
    </template>
    <template v-slot:extension>

    </template>

    <div class="abnormal-container">
      <div class="abnormal-container-all">
        <div class="all-item">
          <div class="all-item-upper">
            {{ itemInfo.abnormalCount ? itemInfo.abnormalCount : 0 }}
          </div>
          <div class="all-item-below">异常次数 (次)</div>
          <div class="all-item-line"></div>
        </div>
        <div class="all-item">
          <div class="all-item-upper">
            {{ itemInfo.abnormalAmt ? formatNumber(itemInfo.abnormalAmt) : 0 }}
          </div>
          <div class="all-item-below">涉及金额 (元)</div>
        </div>
      </div>
      <div class="abnormal-container-main">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
          <div class="abnormal-main-item" v-for="(item, index) in itemInfo.AbnormalConsume" :key="index">
            <div class="item-upper">
              <div class="item-upper-time">
                {{ dayjs(item.startTime).format('YYYY-MM-DD') }}
                {{ dayjs(item.startTime).format('HH:mm:ss') }}
              </div>
              <div class="item-upper-state"></div>
            </div>
            <div class="item-below">
              <div class="item-center">
                <div class="item-center-name">{{ item.memberName }}</div>
                <div class="item-center-price">
                  {{ formatNumber(item.payAmt) }}
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-phone">
                  <span>手机号：</span><span>{{ item.memberMobile }}</span>
                </div>
                <div class="item-footer-table">
                  <span>桌台：</span><span>{{ item.roomName }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao'

import useAppStore from '@/store/app'
const appStore = useAppStore()
const itemInfo = ref({
  abnormalAmt: '',
  abnormalCount: '',
  AbnormalConsume: []
})
// 表单
const postForm = reactive({
  startDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.startDate = startTime
  postForm.endDate = endTime
  loadData(true)
}
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber(num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    itemInfo.value.AbnormalConsume = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetAbnormalConsume',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList[0]) {
      if (nowList[0].AbnormalConsume.length !== postForm.pageSize) {
        finished.value = true
      }
    } else {
      finished.value = true
    }
  }
  if (nowList[0]) {
    itemInfo.value.abnormalAmt = nowList[0].abnormalAmt
    itemInfo.value.abnormalCount = nowList[0].abnormalCount
    Array.prototype.push.apply(
      itemInfo.value.AbnormalConsume,
      nowList[0].AbnormalConsume
    )
  } else {
    itemInfo.value.abnormalAmt = 0
    itemInfo.value.abnormalCount = 0
  }

  if (nowList[0] && nowList[0].AbnormalConsume.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {

  loadData(true)
}
onInit()
</script>

<style scoped lang="scss">
.abnormal-container {
  .abnormal-container-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #28282e80;
    box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
    border-radius: 8px;
    padding: 20px 0;
    margin: 0px 12px 10px;

    .all-item {
      flex-basis: 50%;
      text-align: center;
      position: relative;

      .all-item-upper {
        line-height: 24px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        padding-bottom: 11px;
      }

      .all-item-below {
        line-height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
      }

      .all-item-line {
        position: absolute;
        width: 1px;
        height: 40px;
        right: 0px;
        top: 0px;
        background-image: url('@/assets/images/common/i_onwine-line.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    }
  }

  .abnormal-container-main {
    padding: 0 12px;

    .abnormal-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;

      .item-upper {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-left: 12px;
        padding-bottom: 20px;

        .item-upper-time {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 12px;
        }

        .item-upper-state {
          width: 40px;
          height: 20px;
          background-image: url('@/assets/images/abnormal/i_abnormal_state.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }
      }

      .item-below {
        padding: 0 12px;

        .item-center {
          padding-bottom: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .item-center-name {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 16px;
          }

          .item-center-price {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            line-height: 18px;
          }
        }

        .item-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 12px;

          .item-footer-phone {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 12px;
          }

          .item-footer-table {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 12px;
          }
        }
      }
    }
  }
}</style>
